import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
//import Using ES6 syntax
import WeUI from 'react-weui';
//import styles
import 'weui';
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/meetingRoom.css';
import $ from 'jquery';
const {
    Toptips,
    Toast
} = WeUI;
let screenWidth = $(window).width();
let screenHeight = $(window).innerHeight();
let baseFontSize = 10 * screenWidth / 375;
export default class MeetingRoomTimeUseList  extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.state = {
            residueTime:null,
            showToptips: false,
            showLoading: true,
            showToast: false,
            loadingTimer: null,
            toastTimer:null,
            warnTimer:null,
            topTipsMsg: "服务器错误！",
            data:[

            ],

            balanceTime:{},
            teamName:this.props.location.query.teamName,
        }

    }

    showWarn(error) {
        this.setState({showToptips: true,topTipsMsg:error, showLoading: false});
        this.state.warnTimer = setTimeout(() => {
            this.setState({showToptips: false});
        }, 2000);
    }

    componentWillMount(){ //组件即将被插入
        this.getBalance();
        this.getUseRechargePackageList();
    }

    LeftClick() {

    }



    //获取加油包使用记录
    getUseRechargePackageList(){
        let self = this;
        fetch(getHost() + "/MeetingRoom/booking/useRechargePackage/order/list",{
            method: 'GET',
            credentials: 'include'
        }).then(response => response.json())
            .then(data => {
                if(data.success){
                    self.setState({
                        data:data.data,
                        showLoading:false
                    })
                }else{
                    self.showWarn(data.error.message);
                }
            }).catch(e => {
            self.showWarn(e.error.message);
        });
    }

    buyMeetingRoomTime(){
        location.hash = "/MeetingRoomBuyTime?residueTime="+this.state.residueTime+"&teamName="+this.state.teamName+"";
    }


    getPercent(curNum, totalNum){
        curNum = parseFloat(curNum);
        totalNum = parseFloat(totalNum);
        if (isNaN(curNum) || isNaN(totalNum)) {
            return '-';
        }
        return totalNum <= 0 ? 0 : (Math.round(curNum / totalNum * 10000) / 100.00);
    }


    //获取剩余时间
    getBalance(){
        let self = this;
        fetch(getHost() + "/MeetingRoom/booking/balance",{
            method: 'GET',
            credentials: 'include'
        }).then(response => response.json())
            .then(data => {
                if(data.success){
                    let residueTime = parseInt(self.getPercent(data.data.remainLength,data.data.totalLength));
                    self.setState({
                        balanceTime:data.data,
                        residueTime:residueTime,
                        showLoading:false
                    })
                }else{
                    self.showWarn(data.error.message);
                }
            }).catch(e => {
            self.showWarn(e.error.message);
        });

    }


    setStatrEndTime(start,end){
        let startTime = start.split("~")[0];
        let endTime = end.split("~")[1];
        return startTime + "~" + endTime;

    }


    render() {
        let remainHeight = screenHeight - (18.9 + 2 + 0.8 + 0.6) * baseFontSize  + "px";
        let tempDiv = [];
        if(this.state.data.length > 0){
            this.state.data.map((info,index)=>{
                let list_box = <div className="usedList_box" key={index}>
                    <div className="meetingRoom_name">{info.meetingRoom.name}</div>
                    <div className="used_content_box">
                        <div className="used_content_title">使用时间:</div>
                        <div className="used_content_value">{convertTimestampToStringWithDate(info.createTime)}<span style={{marginLeft:"1rem"}}>{this.setStatrEndTime(info.startPeriodCode,info.endPeriodCode)}</span></div>
                    </div>
                    <div className="used_content_box">
                        <div className="used_content_title">预定人员:</div>
                        <div className="used_content_value">{info.bookUserName}</div>
                    </div>
                    <div className="used_content_box">
                        <div className="used_content_title">扣除时间:</div>
                        <div className="used_content_value">{info.bookLength}小时</div>
                    </div>
                </div>;
                tempDiv.push(list_box);
            })
        }else{
            let div = <div className="noData">暂无数据</div>;
            tempDiv.push(div)
        }


        let marginLeft = null;
        if(this.state.residueTime >= 100){
            marginLeft = 18;
        }else{
            marginLeft = 15;
        }
        return (
            <div style={{height:'100%', width:'100%'}}>
                <NavigationBar Title="企业套餐" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <div className="used_Time_box">
                    <div className="totalTime_content">
                        <img className="totalTime_img"  src="/iot-meeting/assets/images/meetingRoom/meeting_totalTime.png"/>
                        <div className="totalTime_title">会议室总时长:</div>
                        <div className="totalTime_value">{this.state.balanceTime.totalLength}小时</div>
                    </div>
                    <div className="usableTime_content">
                        <img className="usableTime_img"  src="/iot-meeting/assets/images/meetingRoom/meeting_usableTime.png"/>
                        <div className="usableTime_title">会议室可用时长:</div>
                        <div className="usableTime_value">{this.state.balanceTime.remainLength}小时</div>
                    </div>
                    <div className="progressBar_box">
                        <div className="residue_box">
                            <div className="residue_title" style={{marginLeft:this.state.residueTime === 0 ? "0px" :this.state.residueTime - marginLeft +"%"}}>剩余</div>
                            <div className="residue_value_box">
                                <div className="residue_value">{this.state.residueTime}%</div>
                                <img className="arrow" src="/iot-meeting/assets/images/meetingRoom/arrow.png"/>
                            </div>
                        </div>
                        <div style={{clear:"both"}}></div>
                        <div className="used_progressBar"/>
                        <div className="residue_progressBar" style={{width:this.state.residueTime === 0 ? "0px" : this.state.residueTime - 10 +"%"}}/>
                        <div className="buy_btn" onClick={this.buyMeetingRoomTime.bind(this)}>前往购买</div>
                    </div>
                </div>
                <div className="list_title">使用记录列表</div>
                <div className="meetingRoomUsedTimeList_box" style={{height:remainHeight}}>
                    {tempDiv}
                </div>
                <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
                <Toptips type="warn" show={this.state.showToptips}>
                    {this.state.topTipsMsg}
                </Toptips>
            </div>
        )
    }
}